<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="iconfont.css">
	<style type="text/css">
		.bigget{
			width: 450px;
			height: 600px;
			border: 1px solid #e1e1e1;
			border-radius: 10px;
			margin:50px 30px;
		}
		.head{
			width: 450px;
			height: 60px;
			background-color: #B0C4DE;/*#87CEFA*/
			border-top-right-radius: 10px;
			border-top-left-radius: 10px;
			position: relative;
		}
		.head h5{
			display: inline-block;
			color: #fff;
			width: 400px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			font-size: 26px;
			padding: 0;
			margin: 0;
			position: absolute;
			left: 25px;
			top: 0px;
		}
		.return{
			position: absolute;
			top: 0px;
			left: 0px;
			font-size: 40px;
			color: #fff;
			display: inline-block;
			height:40px;
			width: 40px;
		}

		.content{
			margin-top: 15px;
			position: relative;
		}
		.item button{
			background-color: #B0C4DE;
			border: none;
			color: #fff;
			border-radius: 10px;
			height: 40px;
			line-height: 40px;
			font-size: 18px;
			margin: 6px 12px;
		}
		.city{
			width: 250px;
			height: 530px;
			border: 1px solid #e1e1e1;
			border-radius: 6px;
			text-align: center;
			padding-top: 20px;
			position: absolute;
			top: -16px;
			left: 450px;
		}
		.area{
			width: 200px;
			height: 498px;
			border: 1px solid #e1e1e1;
			border-radius: 5px;
			text-align: center;
			padding-top:10px;
			position: absolute;
			top: 25px;
			left: 700px;
		}
	</style>
</head>
<body>
	<div class="bigget">
		<div class="head">	
			<h5>
				<span class="iconfont icon-web-icon- return"></span>
				请选择省份
			</h5>
			
		</div>

		<div class="content">
			<div class="province item">
				<button>广西壮族自治区</button>
				<button>广东</button>
				<button>湖南</button>
				
			</div>
			
			<div class="city item" style="display:none">
				<button>柳州市</button>
				<button>南宁市</button>
				<button>桂林市</button>
				<button>河池市</button>
			</div>

			<div class="area item" style="display:none">
				<button>柳北区</button>
				<button>柳南区</button>
				<button>柳江区</button>
				<button>城中区</button>
			</div>
			
		</div>
	</div>

	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		// 返回按钮单击事件
		$('.return').click(function(){
			// console.log('click------');
			var bcity = $('.city').css('display');
			var barea = $('.area').css('display');
			if (barea == 'block') {
				$('.province').show();
				$('.city').show();
				$('.area').hide();
			}
			if (barea == 'none' && bcity == 'block') {
				$('.province').show();
				$('.city').hide();
				$('.area').hide();
			}
		});

		// 省份单击事件
		function showcity(btn) {
			// 当前点击的省的id
			var proId = $(btn).val();
			// console.log(pid);
			$('.province').show();
			$('.area').hide();
			$('.city').show();

			$('.city').empty();
			$.get('city.json',function(res){
				for (var i = 0; i < res.length; i++) {
					if (proId==res[i].pid) {
						var cityBtn = '<button onclick="showArea(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
						$('.city').append(cityBtn);
					}
				}
			})
		}
		// 城市单击事件
		function showArea(btn){
			// 当前点击的市的id
			var areaId = $(btn).val();
			// console.log(areaId);
			$('.province').show();
			$('.city').show();
			$('.area').show();

			$('.area').empty();
			$.get('area.json',function(res){
				for (var i = 0; i < res.length; i++) {
					if (areaId==res[i].pid) {
						var areaBtn = '<button value="'+res[i].id+'">'+res[i].name+'</button>';
						$('.area').append(areaBtn);
					}
				}
			})

		}

		// 初始化省
		function InitProvince(){
			$('.province').empty();
			$.get('province.json',function(res){
				for (var i = 0; i < res.length; i++) {
					// 用字符串拼接一个button
					var proBtn = '<button onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
					
					$('.province').append(proBtn);
				}
					
			})
		}
		InitProvince();

	</script>
</body>
</html>